<template>
 <div>
   <div class='container'>
    <!-- 主题列表 -->
    <el-card class="box-card" type="flex">
      <el-form>
      <el-form-item label="关键字" >
        <el-row type="flex" justify="space-between">
        <el-input size="mini" style="width:25%" v-model="form.keyword" placeholder="根据编号搜索"></el-input>
          <div>
            <el-button size="mini" @click="dell">清除</el-button>
            <el-button type="primary" size="mini" @click="randoms">搜索</el-button>
          </div>
        </el-row>
      </el-form-item>
        </el-form>

    <div class="total"><i class="el-icon-info"></i>数据一共{{total}}条</div>

      <el-table :data="list">
        <el-table-column prop="id" label="编号" width="200px"></el-table-column>
        <el-table-column prop="questionType" label="题型" width="100px">
          <template #default='{row}'>
            <p v-show="row.questionType === '1'">单选</p>
            <p v-show="row.questionType === '2'">多选</p>
            <p v-show="row.questionType === '3'">解答</p>
          </template>
        </el-table-column>
        <el-table-column prop="questionIDs" label="题目编号" width="200px">
          <template #default="{row}">
            <div>
              <el-link @click="openDialog" type="primary" v-for="(item,index) in row.questionIDs" :key="index">{{ item.number}}<br>
              </el-link >
            </div>
         </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="200px"></el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(S)" width="120px"></el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" width="120px"></el-table-column>
        <el-table-column prop="userName" label="录入人" width="120px"></el-table-column>
        <el-table-column label="操作">
          <template #default='{row}'>
            <el-button type="danger" icon="el-icon-delete" plain circle @click="del(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

    <el-row  style="height: 100px">
    <el-pagination
      background
      :total="total"
      :page-sizes="[20, 30, 40, 50]"
      layout=" ->, prev, pager, next, sizes, jumper"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :page-size="form.pagesize"
      :current-page="form.page"
      >
    </el-pagination>
     </el-row>
 </el-card>

  </div>

  <!-- 弹窗 -->
  <el-dialog title="题目预览" :visible.sync="showDialog" width="740px" @close="close">
    <el-form>
      <el-form-item>
        【题型】: <span></span> 【编号】: <span>234</span> 【难度】: <span>简单</span>【标签】: <span>css3.bfc</span>
        【学科】: <span>前端</span> 【目录】: <span>css基础</span>【方向】: <span>企业服务</span>
      </el-form-item>
        <hr>
      <el-form-item>
        【题干】: <p>128398</p>
      </el-form-item>
      <hr>
      <el-form-item>
         【参考答案】: <el-button type="danger" size="small">视频答案预览</el-button>
         <hr>
      </el-form-item>
      <el-form-item>
        【答案解析】: <span>无</span>
      </el-form-item>
      <el-form-item>
        【题目备注】: <span>无</span>
      </el-form-item>
    <!--  -->
    <el-row style="margin-top: 30px" type="flex" justify="center">
      <el-button size="small" type="primary" @click="close">取消</el-button>
    </el-row>
    </el-form>
  </el-dialog>
 </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'

export default {
  data () {
    return {
      showDialog: false,
      total: 0,
      list: [],
      list2: [],
      form: {
        page: 1,
        pagesize: 20,
        keyword: ''
      }
    }
  },
  created () {
    this.randoms()
  },
  methods: {
    dell () {
      this.form.keyword = ''
      this.randoms()
    },
    async randoms () {
      const res = await randoms(this.form)
      // console.log(res)
      this.list = res.data.items
      this.total = res.data.counts
    },
    handleCurrentChange (val) {
      console.log(val)
      this.form.page = val // val 当前页数
      this.randoms() // 重新渲染
    },
    handleSizeChange (val) {
      this.form.page = 1
      this.form.pagesize = val // 规范: 每页条数变化时 一般将页码归1
      this.randoms()
    },
    // 删除
    async del (id) {
      this.$confirm('确定要删除嘛').then(async () => {
        await removeRandoms(id)
        // console.log(res)
        this.$message.success('删除成功')
        this.randoms() // 重新渲染
      }).catch(() => {
        this.$message.error('取消删除')
      })
    },
    // 打开弹窗并渲染
    async openDialog () {
      this.showDialog = true
    },
    close () {
      this.showDialog = false
    }
  }
}
</script>

<style scoped lang='scss'>
.box-card {
  width: 98.5%;
  margin: 10px auto;
  }
.total {
    background-color:#f4f4f5;
    padding-left: 15px;
    height: 30px;
    line-height: 30px;
  .el-icon-info{
    color: #000;;
    margin-right: 10px;
  }
}
span{
  margin-right: 110px;
}
</style>
